<template>
  <tiny-grid ref="changeGrid" :data="data.tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
    <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options: data.options }"></tiny-grid-column>
    <tiny-grid-column field="address" title="地址" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
    <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow="ellipsis"></tiny-grid-column>
    <tiny-grid-column title="操作" width="100">
      <template v-slot="data">
        <tiny-button size="mini" @click="handleSave(data.row)">保存</tiny-button>
      </template>
    </tiny-grid-column>
  </tiny-grid>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton, Modal } from '@opentiny/vue';
  const changeGrid = ref();
  const data = reactive({ options: [], tableData: [] });

  data.options = [
    { label: '华北区', value: '1' },
    { label: '华东区', value: '2' },
    { label: '华南区', value: '3' },
  ];
  data.tableData = [
    {
      id: '1',
      name: 'GFD科技YX公司',
      area: '1',
      address: '福州',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
    {
      id: '2',
      name: 'WWWW科技YX公司',
      area: '2',
      address: '深圳福田区',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
    {
      id: '3',
      name: 'RFV有限责任公司',
      area: '1',
      address: '中山市',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
    {
      id: '4',
      name: 'TGBYX公司',
      area: '3',
      address: '梅州',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
    {
      id: '5',
      name: 'YHN科技YX公司',
      area: '2',
      address: '韶关',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
    {
      id: '6',
      name: '康康物业YX公司',
      area: '1',
      address: '广州天河区',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
  ];

  const handleSave = row => {
    changeGrid.value.clearActived().then(() => {
      console.log(changeGrid.value.getCurrentRow());
      if (!changeGrid.value.hasRowChange(row)) {
        Modal.alert('当前数据未改变！');
      } else {
        Modal.alert('保存成功！');
      }
    });
  };
</script>
